<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #test {
            display: none;
        }
    </style>
</head>

<body>
    <div id="login">
        <h1>登录</h1>
        <input type="text" placeholder="请输入用户名" id="userName">
        <input type="password" placeholder="请输入密码" id="passWord">
        <button id="submit">登录</button>
    </div>
    <div id="test">
        <h1>欢迎用户：<span id="userName2">xxxxx</span></h1>
        <button id="unsubmit">退出登录</button>
    </div>

    <script>
        let userName = document.getElementById("userName");
        let passWord = document.getElementById("passWord");
        let submit = document.getElementById("submit");
        let userName2 = document.getElementById("userName2");
        let unsubmit = document.getElementById("unsubmit");
        let login = document.getElementById("login");
        let test = document.getElementById("test");

        // 账号信息
        let admim = {
            user: "xyz",
            passW: "123"
        }

        // 过期时间函数
        function UTCtime(exday) {
            // 获取当前时期时间
            // 1.Date():返回值是当前日期时间字符串
            // 2.new Date():返回是当前日期时间对象
            let time = new Date();
            // 单独获取当前的日期，再加上过期天数
            let t = time.getDate() + exday;
            let h=time.getHours()-8;
            // 设置日期
            time.setMinutes(t);
            time.setHours(h);
            return time;

        }
        UTCtime();

        // 拆分cookie字符串函数
        function infor() {
            let x = document.cookie;
            // console.log(x); //password=666; test=xyz; user=456
            // 字符串转数组（.../split）
            let arr = x.split("; ");
            // console.log(arr); // ['password=666', 'test=xyz', 'user=456']
            let obj = {};
            for (let i = 0; i < arr.length; i++) {
                let index = arr[i].indexOf("=");
                let objName = arr[i].slice(0, index);
                let objValue = arr[i].slice(index + 1);
                obj[objName] = objValue;
            }
            return obj;
        }

        // 一开始进入页面，应该首先查看cookie中是否有用户信息，如果有，就表示用于已经登录了，不需要再登录
        window.onload = function () {
            let obj = infor();
            if (admim.user in obj) {
                login.style.display = "none";
                test.style.display = "block";
                userName2.innerText = admim.user;
            } else {
                login.style.display = "block";
                test.style.display = "none";
            }
        }


        document.body.onclick = function () {
            // 登录
            if (event.target.id === "submit") {
                if (userName.value === admim.user && passWord.value === admim.passW) {
                    // 把用于信息用cookie进行存储
                    document.cookie = `${userName.value}=${passWord.value};expires=${UTCtime(30)}`;
                    login.style.display = "none";
                    test.style.display = "block";
                    userName2.innerText = userName.value;


                } else {
                    alert("用户或密码有误！");
                }
            }
            // 退出登录
            if(event.target.id==="unsubmit"){
                // 在cookie中查找到当前登录的账号信息
                let obj=infor();
                let userN=userName2.innerText;//xyz,是对象的键名
                // 删除cookie
                document.cookie = `${userN}=;expires=Thu, 18 Dec 2000 12:00:00 GMT`;
                // 刷新页面
                location.reload();
            }
        }
    </script>

</body>

</html>